<template>
  <div class="download-page">
    <el-card class="download-card">
      <template #header>
        <div class="card-header">
          <h2>下载管理</h2>
        </div>
      </template>
      
      <div class="download-list">
        <div v-for="(download, index) in downloads" :key="index" class="download-item">
          <div class="download-info">
            <h3>{{ download.title }}</h3>
            <p class="status">{{ download.status }}</p>
          </div>
          
          <el-progress 
            :percentage="download.progress" 
            :status="download.status === '下载完成' ? 'success' : ''"
          />
          
          <div class="download-actions">
            <el-button 
              v-if="download.status === '下载完成'"
              type="primary"
              @click="openFile(download.outputPath)"
            >
              打开文件
            </el-button>
            <el-button 
              v-if="download.status === '下载失败'"
              type="danger"
              @click="retryDownload(download)"
            >
              重试
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const downloads = ref([])

const startDownload = async (videoUrl) => {
  try {
    const response = await axios.post('/api/video/download', { videoUrl })
    const downloadId = response.data
    console.log('开始下载:', downloadId)
    
    ElMessage.success('下载任务已开始，请在下载管理中查看进度')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败: ' + (error.response?.data || error.message))
  }
}

const openFile = (path) => {
  window.open(`/api/download/file/${encodeURIComponent(path)}`, '_blank')
}
</script>

<style scoped>
.download-page {
  padding: 20px;
}

.download-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.download-list {
  margin-top: 20px;
}

.download-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.download-item:last-child {
  border-bottom: none;
}

.download-info {
  margin-bottom: 10px;
}

.download-info h3 {
  margin: 0;
  font-size: 16px;
}

.status {
  color: #666;
  margin: 5px 0;
}

.download-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
</style> 